<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./font_zf/iconfont.js"></script>
    <style>
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        .body{
            padding: 0;
            margin: 0;
            position: relative;
        }
        .top{
            background-color: rgb(255, 137, 172);
            display: flex;
            height: 180px;
        }
        .top a{
            text-decoration: none;
            font-size: 90px;
            color: rgb(243, 233, 233);
            margin-top: 50px;
            margin-left: 50px;
        }
        .top h2{
            color: rgb(243, 233, 233);
            font-size: 50px;
            margin-left: 200px;
            margin-top: 80px;
        }
        .top h6{
            color: rgb(243, 233, 233);
            font-size: 30px;
            margin-left: 200px;
            margin-top: 100px;
        }
        .bai{
            height: 180px;
            display: flex;
            color: rgb(233, 42, 17);
        }
        .bai h6{
            font-size: 50px;
            margin-left: 280px;
           margin-top: 90px;
        }
        .bai h2{
            font-size: 100px;
            margin-top: 40px;
        }
        .bai h5{
            font-size: 50px;
            margin-top: 90px;
        }
        .jdzf{
            display: flex;
            background-color: rgb(245, 237, 235);
            height: 130px;
            padding-top: 30px;
        }
        .jdzf svg{
            font-size: 100px;
            margin-left: 50px;
        }
        .jdzf h2{
            font-size: 50px;
            color: rgb(233, 42, 17);
            margin-top: 20px;
        }
        .tt{
            height: 520px;
        }
        .tt>div{
            /* height: 130px; */
            
            
        }
        .jh{
            border-bottom:1px solid rgb(241, 230, 230);
            display: flex;
        }
        .jh svg{
            font-size: 100px;
            margin-left: 30px;
            margin-top: 30px;
        }
        .jh h2{
            font-size: 40px;
            margin-top: 50px;
        }
        .jh h3{
            font-size: 30px;
            margin-top: 50px;
            border:3px solid rgb(212, 75, 75);
            color: rgb(209, 66, 66);
            margin-left: 100px;
            padding: 5px;
        }
        .jh img{
            height: 80px;
            margin-left: 30px;
            margin-top: 30px;
        }
        .bt{
            border-bottom:1px solid rgb(241, 230, 230);
            display: flex;
            padding-top: 30px;
        }
        .bt svg{
            font-size: 70px;
            margin-left: 40px;
            margin-top: 10px;
            
        }
        .bt h1{
            font-size: 40px;
            margin-left: 15px;
            margin-top: 15px;
        }
        .bt h2{
            margin-left: 150px;
            color: rgb(158, 131, 131);
            font-size: 30px;
        }
        .bt img{
            height: 70px;
            margin-left: 25px;
        }
        .xk{
            border-bottom:1px solid rgb(241, 230, 230);
            display: flex;
            margin-top: -230px;
        }
        .xk svg{
            font-size: 80px;
            margin-left: 40px;
        }
        .xk h2{
            font-size: 40px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .xk img{
            margin-left: 455px;
            height: 70px;
        }
        .qb{
            border-bottom:1px solid rgb(241, 230, 230);
            display: flex;
        }
        .qb h2{
            font-size: 40px;
            margin-left: 130px;
        }
        .qb h3{
            font-size: 30px;
            color: rgb(158, 145, 145);
            margin-left: 160px;
            margin-top: 40px;
        }
        .qb a{
            text-decoration: none;
            font-size: 50px;
            color: rgb(19, 17, 17);
            margin-left: 20px;
            margin-top: 25px;
        }
        .ht{
            width: 100%;
        }

        .xia{}
        .xia>div{
            display: flex;
            position: relative;
        }
        .xia>div svg{
            font-size: 80px;
            margin-left: 40px;
            margin-top: 20px;
        }
        .xia>div h2{
            margin-left: 10px;
            font-size: 40px;
        }
        .xia>div img{
            height: 70px;
            position: absolute;
            left: 830px;
            top: 20px;
        }
        .x1{
            border-bottom:1px solid rgb(241, 230, 230);
        }
        .xia2 h2{}

        .yhk{
            position: absolute;
            bottom: 20px;
            left: 50px;
            background-color: rgb(230, 85, 18);
            border-radius: 50px;
            width: 90%;
        }
        .yhk h2{
        
            text-align: center;
            font-size: 30px;
            color: rgb(248, 243, 234);
           /*  width: 900px;
            height: 100px; */
        }
        </style>
</head>
<body>
    <div class="top">
        <a href="./pay.html"><</a>
        <h2>京东收银台</h2>
        <h6>订单中心</h6>
    </div>
    <div class="bai">
        <h6>¥</h6>
        <h2>5099</h2>
        <h5>.00</h5>
    </div>

    <div class="jdzf">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jingdongshanfu"></use>
          </svg>
          <h2>京东支付</h2>
    </div>
    <div class="tt">
        <div class="jh">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiansheyinhanglogo"></use>
              </svg>
              <h2>建设银行储蓄卡(6023)</h2>
              <h3>立减10元∨</h3>
              <img src="./gou.png" >
        </div>
        <div class="bt">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-baitiao"></use>
              </svg>
              <h1>白条(可用¥3000.00)</h1>
              <h2>需组合支付</h2>
              <img src="./qq.png" >
        </div>
        <div class="xk"></div>
        <div class="qb"></div>
    </div>
    <div class="xk">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-qianbao"></use>
          </svg>
          <h2>使用新卡支付</h2>
          <img src="./qq.png" >
    </div>
    <div class="qb">
        <h2>全部付款方式</h2>
        <h3>绑卡最高可减20.00元</h3>
        <a href="#">></a>
    </div>
    <img src="./xiahuitiao.png" class="ht">
    <div class="xia">
        <div class="x1">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixinzhifu"></use>
              </svg>
              <h2>微信支付</h2>
              <img src="./qq.png" >
        </div>
        <div class="x2">
            <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixinzhifu"></use>
              </svg>
              <h2>微信好友代付</h2>
              <img src="./qq.png" >
        </div>
        
    </div>

    <div class="yhk">
        <h2>银行卡支付￥5098.00</h2>
    </div>
   
</body>
</html>